<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title></title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="">
	<meta http-equiv="description" content="This is my page">
	
	<style type="text/css">
	.user_div
	{
		border-width:1px;
		border-style:solid;
		border-color:blue;
	}
	</style>
	
	<link rel="stylesheet" href="${CONTEXT_PATH}/common/pagination/pagination.css" />
	<script type="text/javascript" src="${CONTEXT_PATH}/common/pagination/pagination.js"></script>
	
  </head>
  
  <body>
    <center>
    	<s:form name="frm" id="frm" method="post" action="" namespace="">
    		<s:hidden name="pager.thisPage" id="thisPage" value="1"></s:hidden>
    		<s:hidden name="pager.pageSize" id="pageSize" value="1"></s:hidden>
    		<table width="600px">
    			<tr>
    				<td>
    					name: <s:textfield name="uvo.user.username"></s:textfield><input type="button" value="search" onclick="queryUser(1)" />
    				</td>
    			</tr>
    		</table>
    		<div id="contentDiv" style="width:100%"></div>
    		<div id="paginationDiv"></div>
    		<br/>
    		<div id="contentDiv2" style="width:100%"></div>
    		<div id="paginationDiv2"></div>
    	</s:form>
    </center>
    
    <script type="text/javascript">
   	var url = 'test/page/queryUser.action';

    $(function(){
    	queryUser(1);
    	queryUser2(1);
    });

    function queryUser(pageIndex)
    {
        $('#thisPage').val(pageIndex);
        ajaxAction(url, 'post', 'frm', true, function(obj){
        	var list = obj.list;
        	var len = list.length;
        	var html = new Array();
        	for(var i = 0; i < len; i++)
        	{
            	var lx = list[i];
            	html.push('<div class="user_div" style="margin:4px; width:120px; height:30px; display:inline-block;">name: ' + lx.username + '</div>');
        	}
        	$('#contentDiv').html(html.join(''));

        	var opt = {
       			'thisPage':pageIndex,
       			'pageCount':obj.pageCount,
       			'id':'paginationDiv',
       			'func':'queryUser',
       			'edge':1,
       			'pageEdge':2
       		};
       		newPagination(opt);
        });
    }

    function queryUser2(pageIndex)
    {
        $('#thisPage').val(pageIndex);
        ajaxAction(url, 'post', 'frm', true, function(obj){
        	var list = obj.list;
        	var len = list.length;
        	var html = new Array();
        	for(var i = 0; i < len; i++)
        	{
            	var lx = list[i];
            	html.push('<div class="user_div" style="margin:4px; width:120px; height:30px; display:inline-block;">name: ' + lx.username + '</div>');
        	}
        	$('#contentDiv2').html(html.join(''));

        	var opt = {
       			'thisPage':pageIndex,
       			'pageCount':obj.pageCount,
       			'id':'paginationDiv2',
       			'func':'queryUser2',
       			'edge':1,
       			'pageEdge':2
       		};
       		newPagination(opt);
        });
    }
    </script>
  </body>
</html>
